<template>
  <div class="Login-Container">
    <video autoplay muted loop>
      <source
        src="https://apitest.mizar.hk/assets/backgroundloop.mp4"
        type="video/mp4"
      />
    </video>
    <div class="panel">
      <div>
        <v-text-field dark label="CompCode" v-model="compCode"></v-text-field>
      </div>
      <div>
        <v-text-field dark label="Username" v-model="username"></v-text-field>
      </div>
      <div>
        <v-text-field
          dark
          label="Password"
          v-model="password"
          type="password"
        ></v-text-field>
      </div>
      <v-btn @click="Login"> Login </v-btn>
    </div>
  </div>
</template>

<script lang="ts">
import LangConst from "@/common/constants/LangConst";
import AuthenticateService from "@/common/services/AuthenticateService";
import HttpService from "@/common/services/HttpService";
import { routeMapping, router } from "@/router";
import { Vue, Component } from "vue-property-decorator";
@Component({})
export default class Login extends Vue {
  LangConst: any = LangConst;

  compCode = "TEST";
  username = "admin";
  password = "123456";
  rememberMe = true;

  mount() {
    console.log("Mount");
  }

  async Login() {
    const serverRoutingSuccess = await HttpService.setupServerRouter(
      this.compCode
    );
    if (!serverRoutingSuccess) {
      return;
    }
    let LoginRes = await AuthenticateService.Login(
      this.compCode,
      this.username,
      this.password,
      this.rememberMe
    );
    if (LoginRes) {
      // let temp = this.$store.state.AuthenticationStore.menu.subMenuList;
      //   temp = temp.filter((x) =>
      //     AuthenticateService.isMenuAuthenticated(x.MenuID, "Read")
      //   );
      //   if (common.checkDataExist(temp)) {
      router.push({ name: routeMapping.DashBoard });
      //   } else {
      //     router.push({ name: routeMapping.unAuth });
      //   }
    }
  }
}
</script>
<style lang="scss">
@import "./Login.scss";
</style>
